<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card>
      <!-- 搜索框 inline input 和button 在一行 -->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input style="width: 550px;" v-model="query" placeholder="请输入商品名">
            <!-- 具名插槽 -->
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item>
          <!-- <el-button type="primary" @click="$router.push('/home/goods/add')">添加商品</el-button> -->
          <el-button type="primary" @click="$router.push({ name: 'goodsadd' })">添加商品</el-button>
        </el-form-item>
      </el-form>
      <!-- 5块 1块 -->
      <!-- table 表格 border边框 stripe 表格 -->
      <el-table border stripe :data="tableList" style="width: 100%">
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="goods_name" label="商品名">
        </el-table-column>
        <el-table-column prop="goods_price" label="价格(元)" width="150">
        </el-table-column>
        <el-table-column prop="goods_weight" label="重量(kg)" width="150">
        </el-table-column>
        <el-table-column prop="add_time_data" label="创建时间" width="180">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <!-- 作用域插槽 -->
          <template slot-scope="scop">
            <div>
              <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini"
                @click="delGoodById(scop.row.goods_id)"></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 page-sizes 是下拉的列表 page-size 默认显示下拉多少条 current-page 默认的页面  -->
      <el-pagination @current-change="currentChange" @size-change="sizeChange" :current-page="pagenum"
        :page-sizes="[10, 20, 30, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request';
export default {
  data () {
    return {
      query: "",
      // 从第几页开始
      pagenum: 1,
      pagesize: 10,
      // 列表数据
      tableData: [],
      total: 0
    }
  },
  mounted () {
    // 获取数据
    this.getGoodList()
  },
  computed: {
    tableList () {
      this.tableData.forEach(obj => {
        // 获取当前日期
        const date = new Date(obj.add_time)
        // 自己使用 内置对象,底层使用的是c/c++
        // java 的一些内
        // 获取年
        const year = date.getFullYear();
        // 获取月0-11
        const month = date.getMonth() + 1;
        // 天
        const day = date.getDate();
        // 小时0-23
        const hours = date.getHours();
        // 获取分钟0-59
        const min = date.getMinutes();
        // 秒0-59
        const ss = date.getSeconds();
        obj.add_time_data = `${year}年${month}月${day}日${hours}小时${min}分${ss}秒`
      });
      return this.tableData;
    }
  },
  // 放的方法
  methods: {
    // 分页获取列表数据
    async getGoodList () {
      const { data: { data, meta } } = await request({
        // url:"/goods?query=''&pagenum=11&pagesize=22",
        url: "/goods",
        // ctrl+shift +x
        method: "GET",
        params: {
          query: this.query,
          pagenum: this.pagenum,
          pagesize: this.pagesize
        }
      })
      if (meta.status !== 200) {
        return this.$message.error("网络异常,稍后重试")
      }
      // data.goods.forEach(obj => {
      //   // 获取当前日期
      //   const date = new Date(obj.add_time)
      //   // 自己使用 内置对象,底层使用的是c/c++
      //   // java 的一些内
      //   // 获取年
      //   const year = date.getFullYear();
      //   // 获取月0-11
      //   const month = date.getMonth() + 1;
      //   // 天
      //   const day = date.getDate();
      //   // 小时0-23
      //   const hours = date.getHours();
      //   // 获取分钟0-59
      //   const min = date.getMinutes();
      //   // 秒0-59
      //   const ss = date.getSeconds();
      //   obj.add_time_data = `${year}年${month}月${day}日 ${hours}小时${min}分${ss}秒`
      // });
      this.tableData = data.goods
      this.total = data.total
    },
    // 当前页改变的时候会触发
    currentChange (page) {
      // console.log("当前页改变了", page);
      // 改变页数
      this.pagenum = page
      // 重新查询数据
      this.getGoodList()
    },
    // 分页,每页条数改变
    sizeChange (size) {
      console.log("条数改变了", size);
      // 查询条数改变了
      this.pagesize = size
      // 重新查询数据
      this.getGoodList()
    },
    // 查询
    search () {
      // 每次查询从第一页开始
      this.pagenum = 1
      // 重新查询数据
      this.getGoodList()
    },
    async delGoodById (id) {
      // console.log(id);
      try {
        await this.$confirm('确定要删除吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        // // 往后台数据
        const { data: { meta } } = await request({
          url: `/goods/${id}`,
          method: "delete"
        })
        if (meta.status !== 200) {
          return this.$message.error("删除失败")
        }
        // 删除成功,重新获取数据,刷新页面
        this.getGoodList()
        this.$message.success("删除成功")
      } catch (error) {
        return this.$message.info("取消删除")
      }
    }
  }
}
</script>

<style lang="less" scoped></style>
